<!--  -->
<template>
    <div>
        <div class="title">职员管理</div>
        <ELTable ref="tableRef" v-bind="tableConfig">
            <template #search="{ searchSubmit, params }">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="姓名">
                        <el-input style="width:150px" v-model="params.key" placeholder="请输入姓名" clearable />
                    </el-form-item>

                    <el-form-item label="类型">
                        <el-select clearable v-model="params.type" style="width:120px" placeholder="请选择状态">
                            <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchSubmit">搜索</el-button>
                    </el-form-item>
                </el-form>
            </template>

            <template #buttons="{ deleteAllHandle }">
                <el-button @click="add" type="primary">添加</el-button>
                <el-button @click="deleteAllHandle" type="danger">删除</el-button>

            </template>

            <template #building="{ scope }">
 
                 <div v-for="item in scope.row.building" :key="item.id">
                     {{ item.building }}
                 </div>

            </template>

            

            <template #operate="{ scope, deleteHandle }">
                <el-button @click="edit(scope.row)"  type="primary">修改</el-button>
                <el-button @click="deleteHandle(scope.row.id)" type="danger">删除</el-button>
            </template>
        </ELTable>
        <Add :editData="editData"  @close="handleClose" v-if="dialogVisible"></Add>
    </div>
</template>

<script lang='ts' setup>
import Add from '../../components/staffs/Add.vue';
import { ref } from 'vue'
import ELTable, { TableType } from '../../components/ELTable.vue';  //按ctrl
import { getList, getTypeList } from "../../service/staffs/staffs"
import { columns } from "./config"
const tableConfig: TableType = {

    loadData: getList,
    columns
}
const tableRef=ref<any>();
const types = ref<any>([]);
const getTypeData = async () => {
    const res: any = await getTypeList();
    if (res.errCode === 10000) {
        types.value = res.data.list;
    }
}
//添加
const add = () => {
    dialogVisible.value = true;
    editData.value={};
}

const editData=ref<any>();
//编辑

const edit=(data:any)=>{
    editData.value=data;
    dialogVisible.value = true;
}
 
 
const handleClose = (val:boolean | undefined) => {
    dialogVisible.value = false;
    if(val){
        tableRef.value.getData();
    }
}
const dialogVisible = ref(false)
getTypeData();


</script>
<style scoped lang="less">
@import 'staffs.less';
</style>